<template>
    <div class="app-center">
        <header-bar>
            <a-breadcrumb class="app-breadcrumb">
                <a-breadcrumb-item>操作记录</a-breadcrumb-item>
            </a-breadcrumb>
        </header-bar>
        <div class="app-inner clearfix">
            <div class="filter-block">
                <a-form @submit="onSubmit">
                    <a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}" label="操作人">
                        <a-select showSearch v-model="selectUser" placeholder="请选择" style="width: 160px;">
                            <a-select-option key="all" value="all">全部</a-select-option>
                            <a-select-option :key="`a-select-option-user-${index}`" v-for="(item,index) in users"
                                             :value="item.id">
                                {{item.username}}
                            </a-select-option>

                        </a-select>
                    </a-form-item>
                    <a-form-item :labelCol="{span:2}" :wrapperCol="{span:22}" label="操作时间">
                        <div>
                            <a-date-picker v-model="startDate" placeholder="请选择开始时间" :disabledDate="disabledStartDate"/>
                            <label class="time-divider">至</label>
                            <a-date-picker v-model="endDate" placeholder="请选择结束时间" :disabledDate="disabledEndDate"/>
                        </div>

                    </a-form-item>

                    <a-form-item>
                        <a-button type="primary" style="margin-left: 80px;" htmlType="submit">筛选</a-button>
                    </a-form-item>
                </a-form>
            </div>
            <a-table :rowKey="record => record.id" :dataSource="table.data" :columns="table.columns"
                     :locale="table.locale" :pagination="table.pagination" :loading="table.loading"
                     @change="handleTableChange">
                <template slot="user" slot-scope="user">
                    <a href="javascript:">{{user.username}}</a>
                </template>
                <template slot="url" slot-scope="url">
                    <a href="javascript:">{{url}}</a>
                </template>
                <template slot="methods" slot-scope="methods">
                    <a-tag color="blue">{{methods}}</a-tag>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script>
    import HeaderBar from "../../../components/HeaderBar";
    import AFormItem from "ant-design-vue/es/form/FormItem";
    import {loadOperationLog} from "@/api/setting/log"
    import {loadManager} from '@/api/setting/manager'

    import moment from 'moment';

    export default {
        name: "Logs",
        components: {AFormItem, HeaderBar},
        data() {
            return {
                selectUser: "all",
                users: [],
                startDate: null,
                endDate: null,
                sorter: {
                    field: "created_at",
                    order: "desc"
                },
                table: {
                    loading: false,
                    columns: [
                        {
                            title: "操作人",
                            dataIndex: 'user',
                            scopedSlots: {customRender: 'user'},
                        },
                        {
                            title: "操作模块",
                            dataIndex: "action",
                            sorter: true,

                        },
                        {
                            title: "操作时间",
                            dataIndex: "created_at",
                            sorter: true,
                        },
                        {
                            title: "请求url",
                            dataIndex: "url",
                            scopedSlots: {customRender: 'url'},

                        },
                        {
                            title: "请求方式",
                            dataIndex: "methods",
                            scopedSlots: {customRender: 'methods'},

                        },

                    ],
                    data: [],
                    locale: {
                        emptyText: "~没有更多数据了~"
                    },

                    pagination: {
                        total: 0,
                        current: 1,
                        pageSize: 10,
                        showSizeChanger: true
                    }
                }
            }
        },

        mounted() {
            this.loadLogs()
            this.loadManagers()
        },

        methods: {
            onSubmit(e) {
                e.preventDefault()
                this.loadLogs()
            },
            handleTableChange(pagination, filters, sorts) {
                let {order, field} = sorts
                if (order && field) {
                    this.sorter = {order, field}
                }
                const pager = {...this.pagination};
                pager.current = pagination.current;
                pager.pageSize = pagination.pageSize;
                this.table.pagination = pager;
                this.loadLogs()
            },

            disabledStartDate(current) {
                // Can not select days before today and today
                if (this.endDate) {
                    return current && current > this.endDate.endOf('day');
                } else {

                    return current && current > moment().endOf('day');
                }
            },

            disabledEndDate(current) {
                // Can not select days before today and today
                if (this.startDate) {
                    console.log(current)
                    return (current && current < this.startDate.endOf('day')) || (current && current > moment().endOf('day'));
                } else {

                    return current && current > moment().endOf('day');
                }
            },

            loadManagers(){
                loadManager({pageSize:100}).then(data => {
                    this.users = data.list

                }).catch(error => {
                    this.table.loading = false

                })
            },

            loadLogs() {
                this.table.loading = true;
                let params = {
                    page: this.table.pagination.current,
                    pageSize: this.table.pagination.pageSize,
                    filters: {}
                }
                params.filters.uid = {}
                if (this.selectUser != "all" && this.selectUser) {
                    let filter = {'=': this.selectUser}
                    params.filters.uid = filter
                }

                params.filters.created_at = {};
                if (this.startDate) {
                    params.filters.created_at['>='] = this.startDate.format('YYYY-MM-DD HH:mm');
                }
                if (this.endDate) {
                    params.filters.created_at['<'] = this.endDate.format('YYYY-MM-DD HH:mm');

                }
                if (this.sorter) {
                    params.sorter = this.sorter
                }

                loadOperationLog(params).then(res => {
                    this.table.loading = false;
                    this.table.data = res.list;
                    this.table.pagination.total = res.page.totalCount
                    this.table.pagination.current = res.page.currentPage
                }).catch(error => {
                    this.table.loading = false;

                })
            }
        }
    }
</script>

<style scoped lang="less">
    .top-menu {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e5e5;
    }

    .clearfix {
        zoom: 1;
    }

    .app-center {
        .app-inner {
            margin: 10px;
            padding: 15px;
            min-width: 750px;
            min-height: 500px;
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
            background-color: #fff;
            .time-divider {
                margin-left: 12px;
                margin-right: 12px;
            }
            .app-pagination {
                margin-top: 16px;
                margin-left: auto;
                text-align: right;
            }
            .filter-block {
                padding: 20px;
                background: #f8f8f8;
                margin-bottom: 20px;
            }
        }
        .app-breadcrumb {
            padding: 17px 21px;
        }
    }
</style>
